<template>
  <div class="job-card" @click="handleClick">
<<<<<<< HEAD
    <div class="job-background" :style="{ backgroundImage: 'url(' + (job.background || defaultBackground) + ')' }">
      <div class="job-overlay"></div>
      <div class="job-content">
        <div class="job-header">
          <div class="company-logo">
            <img :src="job.logo || defaultLogo" :alt="job.company">
          </div>
=======
    <div class="job-background">
      <div class="job-content">
        <div class="job-header">
>>>>>>> resume
          <div class="job-title-section">
            <h3 class="job-title">{{ job.title }}</h3>
            <p class="company-name">{{ job.company }}</p>
          </div>
<<<<<<< HEAD
=======
          <div class="favorite-btn" @click.stop>
            <el-button 
              :type="job.isFavorite ? 'warning' : ''" 
              :icon="job.isFavorite ? 'StarFilled' : 'Star'"
              circle 
              @click="toggleFavorite"
            />
          </div>
>>>>>>> resume
        </div>
        
        <div class="job-details">
          <div class="salary">{{ job.salary }}</div>
          <div class="tags" v-if="job.tags">
            <el-tag v-for="tag in job.tags" :key="tag" size="small" :color="getTagColor(tag)">
              {{ tag }}
            </el-tag>
          </div>
        </div>
        
        <div class="job-meta">
          <span class="location">
            <i class="el-icon-location"></i>
            {{ job.location }}
          </span>
          <span class="time">
            <i class="el-icon-time"></i>
<<<<<<< HEAD
            {{ job.postedTime }}
=======
            {{ job.posted_time }}
>>>>>>> resume
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
<<<<<<< HEAD
import { ref } from 'vue'
=======
import { onMounted, onUnmounted } from 'vue'
import { Star, StarFilled } from '@element-plus/icons-vue'
>>>>>>> resume

const props = defineProps({
  job: {
    type: Object,
    required: true
  }
})

<<<<<<< HEAD
const defaultLogo = ref('@/assets/images/default-company.png') // 默认公司logo路径
const defaultBackground = ref('@/assets/images/default-job-bg.jpg') // 默认背景图片路径
=======
const emit = defineEmits(['toggle-favorite'])
>>>>>>> resume

const handleClick = () => {
  // 处理点击事件
  console.log('Job clicked:', props.job)
}

<<<<<<< HEAD
=======
const toggleFavorite = () => {
  emit('toggle-favorite', props.job)
}

const handleFavoritesUpdated = () => {
  // 这里可以添加更新逻辑，如果需要的话
  // 但由于job是props，实际更新应该在父组件中完成
}

>>>>>>> resume
const getTagColor = (tag) => {
  const colors = {
    '全职': '#409eff',
    '兼职': '#67c23a',
    '实习': '#e6a23c',
    '远程': '#909399'
  }
  return colors[tag] || '#c0c4cc'
}
<<<<<<< HEAD
=======

onMounted(() => {
  // 监听全局事件
  window.addEventListener('favoritesUpdated', handleFavoritesUpdated)
})

onUnmounted(() => {
  // 移除事件监听器
  window.removeEventListener('favoritesUpdated', handleFavoritesUpdated)
})
>>>>>>> resume
</script>

<style lang="scss" scoped>
.job-card {
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  .job-background {
<<<<<<< HEAD
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    min-height: 200px;
    
    .job-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
    }
    
    .job-content {
      position: relative;
      z-index: 1;
=======
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    min-height: 200px;
    
    .job-content {
>>>>>>> resume
      padding: 20px;
      color: white;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  
  .job-header {
    display: flex;
<<<<<<< HEAD
    align-items: center;
    
    .company-logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 15px;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      // 当没有图片时显示默认图标
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center;
      }
      
      img {
        position: relative;
        z-index: 1;
      }
    }
    
    .job-title-section {
      .job-title {
        margin: 0 0 5px 0;
        font-size: 18px;
=======
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .job-title-section {
      flex: 1;
      .job-title {
        margin: 0 0 8px 0;
        font-size: 20px;
        font-weight: 600;
>>>>>>> resume
        color: white;
      }
      
      .company-name {
        margin: 0;
        font-size: 14px;
<<<<<<< HEAD
        color: rgba(255, 255, 255, 0.8);
      }
    }
=======
        color: rgba(255, 255, 255, 0.9);
      }
    }
    
    .favorite-btn {
      margin-left: 10px;
    }
>>>>>>> resume
  }
  
  .job-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .salary {
      font-size: 18px;
      font-weight: bold;
      color: #ffd700;
    }
    
    .tags {
      .el-tag {
        margin-left: 5px;
        border: none;
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
      }
    }
  }
  
  .job-meta {
    display: flex;
    justify-content: space-between;
    
    span {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      
      i {
        margin-right: 5px;
      }
    }
  }
}
</style>